<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-836%);
        }
        .pink{
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: pink;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            line-height: 200px;
        }
    </style>
    <script src="../jquery-3.5.1.js"></script>
</head>
<body>
    <h2>按键改变颜色</h2>
    <div class="pink">
        keycode
        <span class="keyCode"></span>
    </div>

    <script>
        $(function(){
            $(document).on('keydown',function(event){
                // alert(event.keyCode
                switch(event.keyCode){
                        case 82:
                        $('.pink').css("background",'red')   
                        break

                        case 81:
                        $('.pink').css("background",'blue')   
                        break

                        case 83:
                        $('.pink').css("background",'purple')   
                        break 

                        case 84:
                        $('.pink').css("background",'purple')   
                        break 

                        case 85:
                        $('.pink').css("background",'yellow')   
                        break 

                        case 86:
                        $('.pink').css("background",'orange')   
                        break
                        default:
                            $('.keyCode').text('暂无此键位')
                            
                }
            })
        })
    </script>
</body>
</html>